<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>　</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- 查询客户端ip用于天气查询 -->
    <script src="https://pv.sohu.com/cityjson"></script>
</head>

<body>
    <div class="page light">
        <div id="log_container">
        </div>
        <div id="top">
            <div class="weibo_container" style="display: block">
                <div class="weibo_title">微博热搜加载中...</div>
                <div class="hot_list">
                    <ul id="hot_word"></ul>
                    <ul id="hot_word_num"></ul>
                </div>
            </div>
        </div>

        <div id="middle">
            <div id="time_container">
                <div id="apmOuterWrapper">
                    <div id="apmInnerWrapper">
                        <div id="apm"></div>
                    </div>
                </div>
                <div class="time" id="time"></div>
                <div class="date" id="date"></div>
            </div>
        </div>

        <div id="bottom">
            <div class="nonebtm_container"></div>
            <div class="weather_container" style="display: block;">
                <div id="weaTitle">天气加载中...</div>
                <div class="weaWrapper">
                    <div id="weaImg"></div>
                    <div id="weaTemp"></div>
                    <div id="weaInfo"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 创建XMLHttpRequest对象
        function createXHR() {
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        // 微博热搜模块
        function weibo() {
            var xhr = createXHR();
            xhr.open("GET", "https://v1.alapi.cn/api/new/wbtop?num=3", true);
            xhr.onreadystatechange = function() {
                if (this.readyState == 4) {
                    var data = JSON.parse(this.responseText);
                    var hots = data.data;
                    var hot_word = document.getElementById("hot_word");
                    var hot_word_num = document.getElementById("hot_word_num");
                    hot_word.innerHTML = "";
                    hot_word_num.innerHTML = "";
                    for (var i = 0; i < hots.length; i++) {
                        var index = i + 1;
                        hot_word.innerHTML += "<li>" + index + ". " + hots[i].hot_word + "</li>";
                        hot_word_num.innerHTML += "<li>" + hots[i].hot_word_num + "</li>";
                    }
                }
            };
            xhr.send(null);
        }

        weibo();
        setInterval("weibo()", 60 * 1000 * 20);

        // 时钟模块
        function clock() {
            var date = new Date();
            var utc8DiffMinutes = date.getTimezoneOffset() + 480;
            date.setMinutes(date.getMinutes() + utc8DiffMinutes);

            var hour = date.getHours();

            var apm = "上<br>午";
            if (hour > 12) {
                apm = "下<br>午";
                hour -= 12;
            }

            var timeString = hour + ":" + ("0" + date.getMinutes()).slice(-2);
            var dateString = date.getMonth() + 1 + "月" + date.getDate() + "日";
            var weekList = ["日", "一", "二", "三", "四", "五", "六"];
            var weekString = "星期" + weekList[date.getDay()];

            document.getElementById("apm").innerHTML = apm;
            document.getElementById("time").innerHTML = timeString;
            document.getElementById("date").innerHTML =
                dateString + " " + weekString;
        }

        clock();

        setInterval("clock()", 60 * 1000);

        // 天气模块
        // 固定9种类型: xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
        var weaImgs = {
            xue: ["&#xe645;", "&#xe645;"],
            lei: ["&#xe643;", "&#xe643;"],
            shachen: ["&#xe646;", "&#xe646;"],
            wu: ["&#xe647;", "&#xe647;"],
            bingbao: ["&#xe667;", "&#xe667;"],
            yun: ["&#xe648;", "&#xe648;"],
            duoyun: ['&#xe648;', '&#xe648;'],
            yu: ["&#xe64b;", "&#xe64b;"],
            yin: ["&#xe64a;", "&#xe652;"],
            qing: ["&#xe649;", "&#xe764;"],
            weizhi: ["&#xe6f2;", "&#xe6f2;"],
        };

        function weather() {
            console.log('weather update')
            var xhr = createXHR();
            xhr.open('GET', 'https://v2.alapi.cn/api/tianqi?token=pBsICqbRV2eVtGiI&ip=' + returnCitySN.cip, true);
            // xhr.open('GET', 'https://tianqiapi.com/free/day?appid=48353766&appsecret=VjZ4oxd5', true);
            // xhr.open('GET','https://tianqiapi.com/free/day?appid=48373524&appsecret=5iHwLsS8',true);
            xhr.onreadystatechange = function() {
                if (this.readyState == 4) {
                    var data = JSON.parse(this.responseText)
                    if (data.code === 200) {
                        weather_data = data.data
                            // 获取天气图标信息
                        var imgs = weaImgs[weather_data.weather_code]
                        var img = imgs[0]
                        var date = new Date()
                        var utc8DiffMinutes = date.getTimezoneOffset() + 480
                        date.setMinutes(date.getMinutes() + utc8DiffMinutes)
                        var hour = date.getHours()
                            // nightHour后天气使用夜间天气图标
                        if (hour > 19 || hour < 6) {
                            img = imgs[1]
                        }

                        var weaImg = '<span class="iconfont">' + img + '</span>' + '<div>天气：' + weather_data.weather + '</div>';
                        var weaTemp = '<div class="tempNum">' + weather_data.temp + '<div class="symbol">&#8451;</div></div>' +
                            '<div>当前气温</div>';
                        var highTemp = weather_data.max_temp // 日间气温/最高气温
                        var lowTemp = weather_data.min_temp // 夜间气温/最低气温
                        var air = weather_data.aqi.air
                        air = air ? air : '未知'
                        var airLevel = weather_data.aqi.air_level // 空气质量，air_level为alapi独有
                        airLevel = airLevel && air ? airLevel : ''
                        var updateTime = weather_data.update_time.split(' ') // 更新时间，alapi格式为'年-月-日 时-分-秒'，tianqiapi格式为'时-分'
                        updateTime = updateTime[updateTime.length - 1]
                        var weaInfo = '<div>最高/低气温：' + highTemp + '/' + lowTemp + '&#8451;</div>' +
                            '<div>湿度：' + weather_data.humidity + '</div>' +
                            '<div>空气质量：' + air + airLevel + '</div>' +
                            '<div>风向：' + weather_data.wind + '</div>' +
                            '<div>风速：' + weather_data.wind_speed + ' ' + weather_data.wind_scale + '</div>' +
                            '<div>更新时间：' + updateTime + '</div>';
                        document.getElementById('weaTitle').innerHTML = weather_data.city + '当前天气'
                        document.getElementById('weaImg').innerHTML = weaImg
                        document.getElementById('weaTemp').innerHTML = weaTemp
                        document.getElementById('weaInfo').innerHTML = weaInfo
                    } else {
                        console.error('天气数据获取失败: ' + weather_data.msg)
                        document.getElementById("weaTitle").innerHTML = '数据获取失败，请稍后再试～';
                    }
                }
            }
            xhr.send(null);
        }

        weather();
        setInterval("weather()", 60 * 1000 * 20);
    </script>
</body>

</html>